<template>
	<view class="page-bg">
		<u-navbar :border="false" :placeholder="true">
			<view slot="left">

			</view>
			<view slot="center" class="fb c3 f16">
				订单
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff" :offset-top="offsetTop" customNavHeight="44">
			<u-tabs :list="tabs" :current="currentIndex" style="width: 100%;" lineColor="#1AC388" @change="tabsChange"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</u-sticky>
		<swiper :current="currentIndex" :style="{height:swiperContentHeight}" duration="300" @change="changeTab">

			<swiper-item v-show="currentIndex==0">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in allOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">
								<view class="unConfirm-bg" v-if="item.status==2" @click="showCancel(item)">
									取消
								</view>
								<view class="confirm-bg" @click="accpetOrder(item)" v-if="item.status==0">
									抢单
								</view>
								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>
								<view class="unConfirm-bg" @click="orderSettle(item)" v-if="item.status>3">
									订单结算
								</view>
								<view class="unConfirm-bg" @click="showPhoneNumber(item)">
									拨打电话
								</view>
								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="allOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item v-show="currentIndex==1">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in waitAcceptOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">
								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>
								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
								<view class="confirm-bg" @click="accpetOrder(item)" v-if="item.status==0">
									抢单
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="waitAcceptOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-show="currentIndex==2">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in waitServiceOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>
							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">
								<view class="unConfirm-bg" v-if="item.status==2" @click="showCancel(item)">
									取消
								</view>

								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>
								<view class="unConfirm-bg" @click="orderSettle(item)" v-if="item.status>3">
									订单结算
								</view>
								<view class="unConfirm-bg" @click="showPhoneNumber(item)">
									拨打电话
								</view>
								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="waitServiceOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-show="currentIndex==3">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in inServiceOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">
								<view class="unConfirm-bg" v-if="item.status==2" @click="showCancel(item)">
									取消
								</view>

								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>
								<view class="unConfirm-bg" @click="orderSettle(item)" v-if="item.status>3">
									订单结算
								</view>
								<view class="unConfirm-bg" @click="showPhoneNumber(item)">
									拨打电话
								</view>
								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="inServiceOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-show="currentIndex==4">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in doneOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">

								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>

								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="doneOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item v-show="currentIndex==5">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltolower="onreachBottom">
					<view v-for="item,index in failOrder" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />
							<view class="f">
								<view class="f">
									<image src="../../static/order/timer-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.createTime}}</view>
								</view>
								<view class="f ml20">
									<image src="../../static/order/user-order.svg" style="width: 20px; height: 20px;">
									</image>
									<view class="f16 fb c3 ml10">{{item.contactor}}</view>
								</view>
							</view>

							<view class="f14 c6 mt10">
								<view class="f">
									<view>
										预约地址：
									</view>
									<view class="ml5">
										{{item.province+item.city+item.county+item.address}}
									</view>
								</view>
								<view class="f">
									<view>
										物品估重：
									</view>
									<view class="ml5">
										{{Number(item.expectWeightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										预估金额：
									</view>
									<view class="ml5">
										¥ {{item.expectAmountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										预约开始时间：
									</view>
									<view class="ml5">
										{{item.startTime}}
									</view>
								</view>
								<view class="f">
									<view>
										预约结束时间：
									</view>
									<view class="ml5">
										{{item.endTime}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">

								<view class="unConfirm-bg"
									@click="navToView('/pagesA/order-details/order-details?id='+item.id)">
									查看详情
								</view>

								<view class="confirm-bg" @click="goMap1(item)">
									导航
								</view>
							</view>
						</view>

					</view>
					<view class="f-f-c-c" v-show="failOrder.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>
				</scroll-view>
			</swiper-item>


		</swiper>
		<u-popup :round="10" :show="showPhone" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					{{phone}}
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="showPhone=false">
						取消
					</view>
					<view class="cm" @click="callPhone()">
						拨号
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="cancel" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					是否取消当前订单
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="cancel=false">
						取消
					</view>
					<view class="cm" @click="handleOrder('3')">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showPhone: false,
				cancel: false,
				height: '900px',
				currentIndex: 0,
				offsetTop: '0px',
				tabs: [{
						name: '全部',
					}, {
						name: '待接单',
					}, {
						name: '待服务'
					}, {
						name: '服务中'
					}, {
						name: '成功'
					},
					{
						name: '失败'
					}
				],
				allOrder: [],
				waitAcceptOrder: [],
				waitServiceOrder: [],
				inServiceOrder: [],
				doneOrder: [],
				failOrder: [],
				// 0待接单，2待服务，4服务中，5成功，待评价，6成功，已评价，7服务失败，待评价，8服务失败，已评价不能为空, 9超时结束
				status: ['待接单', '', '待服务', '', '服务中', '成功-待评价', '已完成', '服务失败-待评价', '服务失败', '超时结束'],
				params: {
					pageNum: 1,
					pageSize: 10,
					status: '-1',
				},
				currentOrder: null,
				phone: '',
				scrollerHeight: 0,
				swiperContentHeight: 0,

				scrollTop: 9999,
				ismore: true,
				latitude:'',
				longitude:'',
			}

		},
		beforeDestroy() {
			uni.setStorage({
				key: 'currentPage',
				data: 0
			})
		},
		onLoad() {
		
			let currentPage = uni.getStorageSync("currentPage")
			if (currentPage) {
				this.currentIndex = Number(currentPage)
			}
			let system = uni.getSystemInfoSync()
			this.offsetTop = (system.statusBarHeight) + 'px'
			let that=this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					console.log(res)
					console.log(that.latitude)
					console.log(that.longitude)
				}
			})
			this.listenerOrder()
			// this.requestOrder();
			
		},
		onShow() {
			let currentPage = uni.getStorageSync("currentPage")
			if (currentPage) {
				this.currentIndex = Number(currentPage)
			}
			uni.setStorageSync("currentPage", '')
			this.getScollHeight()
		},
		methods: {
			// 设置scoll高度
			getScollHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let windowHeight = res.windowHeight;
						that.swiperContentHeight = (windowHeight - 100) + 'px';
						that.scrollerHeight = (windowHeight - 120 - 5) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			goMap1(item) { //
				uni.openLocation({
					latitude: Number(item.latitude), //维度
					longitude: Number(item.longitude), //经度
					scale: 18, //缩放比例，范围5~18，默认为18
					name: item.province + item.city + item.county, //地址名称
					address: item.address //地址详情
				})
			},
			close() {
				this.showPhone = false
				this.cancel = false
			},
			showCancel(item) {
				this.currentOrder = item
				this.cancel = true
			},
			showPhoneNumber(item) {
				this.phone = item.phone
				this.showPhone = true

			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			tabsChange(value) {
				console.log(value.index)
				this.currentIndex = value.index
				this.listenerOrder()
			},
			requestOrder() {
				let that = this
				that.request("get", "riderAppOrder/app/getOrderPageList", uni.getStorageSync('token'), that.params).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							if (that.params.pageNum == 1) {
								this.ismore = true
								switch (that.currentIndex) {
									case 0:
										that.params.status = '-1'
										that.allOrder = []
										that.allOrder = res.rows
										break
									case 1:
										that.params.status = '0'
										that.waitAcceptOrder = []
										that.waitAcceptOrder = res.rows
										break
									case 2:
										that.params.status = '2'
										that.waitServiceOrder = []
										that.waitServiceOrder = res.rows
										break
									case 3:
										that.params.status = '4'
										that.inServiceOrder = []
										that.inServiceOrder = res.rows
										break
									case 4:
										that.params.status = '5'
										that.doneOrder = []
										that.doneOrder = res.rows
										break
									case 5:
										that.params.status = '7'
										that.failOrder = []
										that.failOrder = res.rows
										break
								}

							} else {
								switch (that.currentIndex) {
									case 0:
										that.params.status = '-1'
										that.allOrder = [...that.allOrder, ...res.rows]
										break
									case 1:
										that.params.status = '0'
										that.waitAcceptOrder = [...that.waitAcceptOrder, ...res.rows]
										break
									case 2:
										that.params.status = '2'
										that.waitServiceOrder = [...that.waitServiceOrder, ...res.rows]
										break
									case 3:
										that.params.status = '4'
										that.inServiceOrder = [...that.inServiceOrder, ...res.rows]
										break
									case 4:
										that.params.status = '5'
										that.doneOrder = [...that.doneOrder, ...res.rows]
										break
									case 5:
										that.params.status = '7'
										that.failOrder = [...that.failOrder, ...res.rows]
										break
								}
							}
							if (res.rows.length < 10) {
								that.ismore = false
							} else {
								that.ismore = true
							}

						}
					})
			},
			//swiper 切换监听
			changeTab(e) {
				this.currentIndex = e.target.current;
				this.listenerOrder()
			},

			listenerOrder() {
				this.params.pageNum = 1
				this.params.pageSize = 10
				switch (this.currentIndex) {
					case 0:
						this.params.status = '-1'
						break
					case 1:
						this.params.status = '0'
						this.params.latitude=this.latitude
						this.params.longitude=this.longitude
						console.log(this.latitude)
						console.log(this.longitude)
						break
					case 2:
						this.params.status = '2'
						break
					case 3:
						this.params.status = '4'
						break
					case 4:
						this.params.status = '5'
						break
					case 5:
						this.params.status = '7'
						break
				}
				console.log(this.params)
				this.requestOrder();
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.ismore) {
					this.params.pageNum += 1
					this.requestOrder()
				}
			},
			accpetOrder(item) {
				this.currentOrder = item
				this.handleOrder('2')
			},
			handleOrder(status) {
				this.cancel = false
				uni.showLoading({

				})
				let params = {
					id: this.currentOrder.id,
					status: status
				}
				let that = this
				that.request("get", "riderAppOrder/app/dealOrder", uni.getStorageSync('token'), params).then(
					res => {
						if (res.code === 200) {
							that.requestOrder();
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true
							})
						}
						uni.hideLoading()
					})
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
			orderSettle(item) {
				console.log(item, 'item')
				// this.navToView('/pagesA/settlement-order/settlement-order')
				this.getSettleOrder(item.id)
			},
			getSettleOrder(id) {

				let that = this
				that.request("get", "riderAppOrder/app/getSettleOrderBy/" + id, uni.getStorageSync('token')).then(
					res => {
						if (res.code === 200) {
							if (res.data == null) {
								this.navToView('/pagesA/settlement-order/settlement-order?id=' + id)
							} else {
								this.navToView('/pagesA/order/order-settle-details?id=' + id)
							}
						}
						uni.hideLoading()
					})
			},

		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
	}

	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}

	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}

	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}

	.confirm-bg {
		width: 90px;
		height: 34px;
		margin-left: 10px;
		background: #1AC388;
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.unConfirm-bg {
		margin-left: 10px;
		width: 90px;
		height: 34px;
		background: rgba(26, 195, 136, 0);
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #1AC388;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.phone-bg {
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 17px 17px 17px 17px;
		color: #1AC388;
	}
</style>